<template>
	<div>
		<Modal v-model="olddata.show_change_table" @on-visible-change="to">
			<p slot="header" style="color:#f60;text-align:center">
				<Icon type="ios-information-circle"></Icon>
				<span>修改信息</span>
			</p>
			<div style="text-align:center">


				<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
					<FormItem label="姓名" prop="name">
						<Input v-model="formValidate.name" placeholder="输入名字"></Input>
					</FormItem>
					<FormItem label="身份证号" prop="idcard">
						<Input v-model="formValidate.idcard" placeholder="输入身份证号" disabled></Input>
					</FormItem>
					<FormItem label="手机号" prop="phone">
						<Input v-model="formValidate.phone" placeholder="输入手机号" ></Input>
					</FormItem>
					
				</Form>
			</div>
			<div slot="footer">
				<Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
				<Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
			</div>
		</Modal>

	</div>
</template>
<script>
	export default {
		props: {
			olddata: {
				type: Object,
			},
		},
		data() {
			// const validAge = (rule, value, callback) => {
			// 	if (!value) {
			// 		return callback(new Error("不能为空"))
			// 	} else {
			// 		if (Number.isInteger(value)) {
			// 			return callback(new Error("请输入正确的数字(整数)"))
			// 		} else {
			// 			setTimeout(() => {
			// 				if (value < 18) {
			// 					return callback(new Error("年龄不能小于18周岁"))
			// 				} else {
			// 					return callback()
			// 				}
			// 			}, 1000);

			// 		}
			// 	}
			// };
			return {
				formValidate: {
					name: "",
					idcard:"",
					phone:""
				},
				num:"",
				url: "",

				ruleValidate: {
					name: [{
						required: true,
						message: 'The name cannot be empty',
						trigger: 'blur'
					}],
					idcard: [{
							required: true,
							message: 'IDcard cannot be empty',
							trigger: 'blur'
						},
					],
					phone: [{
						required: true,
						message: '输入正确手机号',
						trigger: 'change'
					}],
				}
			}
		},
		watch: {
			olddata: {
				handler(n) {
					this.formValidate.name = n.name
					this.formValidate.idcard = n.idcard
					this.formValidate.phone=n.phone
					this.url = n.url
					this.num=n.num
				},
				deep: true

			}
		},
		methods: {
			handleSubmit(name) {
				// setTimeout(() => {
				// 	this.modal_loading = false
				// }, 1000)
				var udata={
					name:this.formValidate.name,
					idcard:this.formValidate.idcard,
					phone:this.formValidate.phone
				}
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.axios({
								method: 'put',
								url: this.url,
								data: this.formValidate
							}).then(res=>{
								// console.log("子组件更新情况:")
								// console.log(udata)]
								
								
								this.$emit("update",{update:true,newdata:udata,index:this.num})
								console.log(res)
							})
							.catch(error => {
								this.$Message.info(error)
							})
						this.$emit("receive",false)

					} else {
						this.$Message.error('Fail!');
					}
				})
			},
			handleReset(name) {
				this.$refs[name].resetFields();
			},
			to: function(value) {
				this.$emit("receive", value)
			}
		},
	}
</script>
